import React, {Component} from 'react';
import {WingBlank, Grid} from '@ant-design/react-native';
import {Text, View, TouchableNativeFeedback, Image} from 'react-native';
import {Navigation} from '../UseNavigation';
import {icons} from '../../assets/images';
import styles from './styles';

const toolsList = [
  {
    icon: icons.transform,
    text: `单位转换`,
    path: `Home/Tools/Transform`,
  },
  {
    icon: icons.rate,
    text: `增长率计算`,
    path: `Home/Tools/Rate`,
  },
];

@Navigation
export class Tool extends Component {
  toDetail = (recoder, index) => {
    this.props.navigation.navigate(recoder.path);
  };

  renderItem = (recoder, index) => {
    return (
      <TouchableNativeFeedback
        onPress={() => {
          this.toDetail(recoder, index);
        }}>
        <View style={styles.item}>
          <Image
            style={styles.icon}
            resizeMode={'contain'}
            source={recoder.icon}
          />
          <Text style={styles.text}>{recoder.text}</Text>
        </View>
      </TouchableNativeFeedback>
    );
  };

  render() {
    return (
      <WingBlank>
        <Text> Tools List </Text>
        <Grid data={toolsList} renderItem={this.renderItem} columnNum={3} />
      </WingBlank>
    );
  }
}
